import React, { useMemo } from 'react'
import { View } from "@tarojs/components"
import { MoneyFormat } from '@/utils/format'
import './index.scss'

const ProgressBar: React.FC<{value: number, className?: string}> = React.memo((props) => {    
    
    const countWidth = useMemo(() => {
        return {width: (props.value > 100 ? 100 : props.value < 0 ? 0 : (props.value || 0)) + '%'}
    }, [props.value])

    return <View className={'progress-bar flex-row flex-item ' + (props.className || '')}>
        <View className={"progress-val flex-row flex-item " + (props.value > 100 ? 'progress-val-over' : '')} style={countWidth}>
            <View className="flex1"></View>
            <View className="val-text font-size16">{MoneyFormat(props.value)}%</View>
        </View>
    </View>
})

export default ProgressBar